<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" >
<head><title>website-keyboard-control</title>
<META http-equiv="Content-Type"	content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-TW" />
<META http-equiv="Pragma"		content="no-cache"/>
<META http-equiv="Cache-control"	content="no-cache, must-revalidate, private"/>
<META http-equiv="imagetoolbar" 	content="no" />

<META name="author"				content="Canis"/>
<META name="copyright"			content="www.clonefactor.com/"/>
<META name="keywords"			content="clonefactor.com, clone factor, web design"/>
<META name="Description"		content="web"/>
<META name="date"				content="2012/02/29"/>

<!-- Javascript //-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/keyboard-lastest.js"></script>
<script type="text/javascript" src="./js/keyboard-hotkey-lastest.js"></script>
<script type="text/javascript">
function output(_str){
	var _htm = $("#output").val();
	_htm=_str+"\n"+_htm;
	if(typeof _str=='undefined') _htm="";
	$("#output").val(_htm);
}//fn
function keystats(_str){
	var _htm = $("#keystats").val();
	_htm=_str+"\n"+_htm;
	if(typeof _str=='undefined') _htm="";
	$("#keystats").val(_htm);
}//fn
function moverobot(_x,_y){
	var _robot = $("#robot"),
	_ox = _robot.position().left,
	_oy = _robot.position().top;
	if(_x!=0 && _x!=undefined) $("#robot").css("left",(_ox+_x));
	if(_y!=0 && _y!=undefined) $("#robot").css("top",(_oy+_y));
}//fn
function robotSay(_str){
	$("#robot .bubble").html(_str).show().delay(1000).fadeOut(500);
}//fn
function html2Tag(_tagName, _src, _completefn){
	$("#"+_tagName).load(_src, function(response, status, xhr){
		if (status == "error") {
			$("#"+_tagName).html("Error : " + xhr.status + " " + xhr.statusText);
		}else if(status== "success"){
			if(_completefn!=undefined && _completefn!=null) _completefn();
		}//if
	});
}//fn

$(document).ready(function(){
	html2Tag("menu", "menu.html");
	$.keyboard.debug(keystats);		// linkup debug message to keystats;
	$.hotkey.add("base",
		{
			key : "F5",					// 按鍵 F5, reload.
			fn : function(){window.location.reload(true);}
		},{
			key : "esc",				// 按鍵 Esc
			fn : function(){			// 清除, 測試用.
				output();
				keystats();
				$(".submenu").hide();
			}
		});
	$.hotkey.add("robot",
		{	// Robot demo
			key : "arrow left",
			repeat: true,
			fps: 50,
			fn: function(){ moverobot(-5,0);}
		},{
			key : "arrow right",
			repeat: true,
			fps: 50,
			fn: function(){ moverobot(5,0);}
		},{
			key : "arrow up",
			repeat: true,
			fps: 50,
			fn: function(){ moverobot(0,-5);}
		},{
			key : "arrow down",
			repeat: true,
			fps: 50,
			fn: function(){ moverobot(0,5);}
		});
		
	$.hotkey.addByList("hotkeymenu");
	
	$.hotkey.load("base",true);
	$.hotkey.load("robot");
	$.hotkey.load("hotkeymenu");
	
	$("#mod_clear").click(function(){ $.keyboard.reset() });
	$("#mod_base").click(function(){ $.hotkey.load("base"); });
	$("#mod_robot").click(function(){ $.hotkey.load("robot"); });
	$("#mod_menu").click(function(){ $.hotkey.load("hotkeymenu"); });
});

</script>
<LINK href='./css/keyboard-hotkey.css' rel='stylesheet' type='text/css'/>
<LINK href='./css/style.css' rel='stylesheet' type='text/css'/>
<style type="text/css">
	.submenu{
		position:absolute;
		display:none;
		background-color: #FFF;
		border: 1px black solid;
		padding: 10px;
	}
	#hotkeymenu{
		display:inline-block;
	}
	.keyboard-hotkey-menu{
		font-size:12px;
	}
	.keyboard-hotkey-menu .keyboard-hotkey-level{
		padding:5px;
	}
	.bubble {
		margin: 0px;
		padding: 10px;
		position: relative;
		border-radius: 50px;
		white-space: nowrap;
		display:none;
	}
	.bubble:after {
		content: "";
		position: absolute;
		top: 100%;
		left: 15px;
		border-top: 20px solid blue;
		border-top-color: inherit;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
	}
</style>
</head>
<body>
	<div style="color:#ccc;text-shadow:-1px -1px 0px #999;font-size:60px; " >website-keyboard-control</div>
	
	<fieldset>
		<legend>Example</legend>
		<div id="menu"></div>
	</fieldset>
	
	<!-- robot //-->
	<div id="robot_base"></div>
	<div id="robot">
		<div class="bubble" style="position:absolute;top:-50px; background: #F7F2E0; border-color:#F7F2E0">test</div>
		<img src="./images/robot_icon.gif" width="100%" height="100%"/>
	</div>
	<div style="position:absolute;top:200px;left:580px;z-index:1;">
		<img src="./images/desc.gif" />
	</div>
	<!-- robot //-->
	
	<fieldset>
		<legend style="color:#ccc;text-shadow:-1px -1px 0px #999;font-size:30px; ">MOD</legend>
		<ul>
			<li><input id="mod_clear" type="button" value="Clear all Hotkey"/></li>
			<li><input id="mod_base" type="button" value="Load base hotkey"/> ESC, F5</li>
			<li><input id="mod_robot" type="button" value="Load robot control"/> left, right, up, down</li>
			<li><input id="mod_menu" type="button" value="Load menu control"/> Shift+a,Shift+s.....</li>
		</ul>
	</fieldset>
	
	<fieldset>
		<legend style="color:#ccc;text-shadow:-1px -1px 0px #999;font-size:30px; ">Menu</legend>
		use "Shift+?" to access (?) command<br/>
		
		<div id="hotkeymenu">
			<ul>
				<li key="Shift|a" fn=" output('ActionA method selected') " >(a) Action
					<ul>
						<li key="1" fn=" output('Action set 1') ">(1) Action set 1
							<ul>
								<li key="1" fn=" $('#robot').animate({top:'-=50',width:'120px',height:'120px'}, 300).animate({top:'+=50',width:'100px',height:'100px'}, 200); output('Jump') ">(1) Jump!!</li>
								<li key="2" fn=" $('#robot').animate({left:'-=100'}, 1000).animate({left:'+=200'}, 2000).animate({left:'-=100'}, 1000); output('walk around') ">(2) walk around</li>
								<li key="3" >(3) Do nothing, no fn assign</li>
								<li key="4" onclick=" alert('watch the code.') " >(4) Function assign by custom way</li>
							</ul>
						</li>
						<li key="2" fn=" $('#robot').animate({top:100,left:500}, 2000); output('Going home.') ">(2) Go Back Home</li>
					</ul>
				</li>
				<li key="Shift|s" fn=" output('Say method selected') ">(s) Say
					<ul>
						<li key="1" fn=" robotSay('I\'m fine, Thank you.'); ">(1) How are you</li>
						<li key="2" fn=" robotSay('right click to watch this page\'s source code.'); ">(2) Say something</li>
					</ul>
				</li>
			</ul>
		</div>
		
		
	</fieldset>
	
	
	<div id="footer">
		<textarea id="output" cols="40" rows="15">output area</textarea>
		<textarea id="keystats" cols="80" rows="15" >Debug of keyboard api</textarea>
	</div>
</body>
</html>